<template>
  <div class="myContailer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
        <el-button type="primary" class="myBgGreen" @click="onSeva">保 存</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <table class="myTable">
        <tr>
          <th>模板ID</th>
          <th>模板名称</th>
          <th>
            <input type="checkbox" id="allCheck"/>
            <label for="allCheck">启用</label>
          </th>
          <th>权限</th>
        </tr>
        <tr v-for="i in menudata">
          <td class="myIdBox">
            <span>{{i.id}}</span>
          </td>
          <td class="myTextAlignLeft">
            <span>{{i.title}}</span>
          </td>
          <td class="myCheckBox">
            <input type="checkbox" :id="i.id" />
          </td>
          <td class="myCheckPowerBox">
            <div v-for="j in i.btn" >
              <input type="checkbox" :id="j.id" :disabled="checkBoxList[''+i.id]" :data-id="i.id"/>
              <label :for="j.id">{{j.title}}({{j.id}})</label>
            </div>
          </td>
        </tr>
      </table>
    </el-row>
  </div>
</template>     

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }

  .myTable{
    border-collapse:collapse; 
    width: 100%;
    border:1px solid #e6ebf5;
    font-family: Microsoft YaHei;
  }
  .myTable tr,.myTable td,.myTable th{
    border:1px solid #e6ebf5;
    box-sizing: border-box;
  }
  .myTable th{
    background: #eef1f6;
    color: #000;
    font-weight: 500;
    padding: 12px 0;
  }
  .myTable td{
    color: #606266;
    padding: 12px 0;
  }
  .myTable tr:nth-child(odd){
    background: #fafafa;
  }
  .myTable tr:hover{
    background: #f5f7fa;
  }
  .myTable input{
    cursor: pointer;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
  }
  .myTable label{
    margin-right:10px;
    padding-left: 2px; 
    cursor: pointer;
    line-height: 15px;
  }
  .myTextAlignLeft{
    position: relative;
    width: 30%;
  }
  .myTextAlignLeft span{
    width: 350px;
    position: relative;
    display: block;
    left: 40%;
    text-align: left;
    white-space: pre;
  }
  .myCheckBox{
    width:100px;
  }
  .myIdBox{
    width: 100px;
  }
  .myCheckPowerBox div{
    text-align:left;
    box-sizing: border-box;
    display: flex;
    float: left;
    padding:5px 0 5px 20px;
  }
</style>

<script>
  import { getMenuPowerList , updateMenuPower } from '@/api/role';
  export default {
    data(){
      return{
        title:"菜单权限管理",
        id:"",
        menudata:[],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        loading:false,
        multipleSelection:[],
        idArr:[],
        list:[],
        newList:[],
        checkBoxList:{},
        isabled:true,
        idList:[],
        //hierarchy:""
      }
    },
    components: {
        
    },
    created(){
      document.title = this.title;
      this.id = this.$route.query.id;
      
      this.onGetMenuPowerList();
    },
    methods:{
      onGetArr(e, l){
        let vm=this;
        let nbsp="";
        for(let i=0; i<l ; i++){
          nbsp+="        "
        }
        e.title = nbsp + e.title;

        vm.newList.push(e);
        for(let i=0; i<e.children.length; i++){
          vm.onGetArr(e.children[i], l+1);
        }
      },
      onGetMenuPowerList(){//拉取菜单权限列表
        let vm=this;
        getMenuPowerList(vm.id).then(response => {
          let res=response.data;
          
          //将拉取的树对象拉平
          for(let i=0; i<res.length; i++){
            vm.onGetArr(res[i], 0);
          }

          for(let i=0; i<vm.newList.length; i++){
            if(vm.newList[i].checked){
              vm.$set(vm.checkBoxList, '' + vm.newList[i].id , false);
            }else{
              vm.$set(vm.checkBoxList, '' + vm.newList[i].id , true);
            }
          }

          setTimeout(function(){
            let checkList=[];
            for(let i=0; i<vm.newList.length; i++){
              if(vm.newList[i].checked){

                //启用勾选
                let id='#' + vm.newList[i].id;
                $(id).attr("checked","checked");

                vm.idList.push(vm.newList[i].id);

                //权限勾选
                if(vm.newList[i].btn){
                  for(let j=0; j<vm.newList[i].btn.length; j++){
                    if(vm.newList[i].btn[j].checked){
                      let id='#' + vm.newList[i].btn[j].id;
                      $(id).attr("checked","checked");

                      vm.idList.push(vm.newList[i].btn[j].id);
                    }
                  }
                }

              }
            }
            //启用
            $('.myCheckBox input').on('click',function(e){
              $(this).attr('checked',!$(this).attr('checked'));
              if($(this).is(':checked')){
                vm.$set(vm.checkBoxList, '' + $(this).attr('id') , false);
                vm.idList.push($(this).attr('id'));

                for(let l=0; l<$("[data-id="+$(this).attr('id')+"]").length; l++){
                  let add=$("[data-id="+$(this).attr('id')+"]")[l];
                  vm.idList.push(add.id);
                }
                $("[data-id="+$(this).attr('id')+"]").prop("checked",true);

              }else{
                $("[data-id="+$(this).attr('id')+"]").prop("checked",false);
                vm.$set(vm.checkBoxList, '' + $(this).attr('id') , true);

                vm.onRemoveList(vm.idList,$(this).attr('id'));//移除启用的id
                for(let l=0; l<$("[data-id="+$(this).attr('id')+"]").length; l++){
                  let remove=$("[data-id="+$(this).attr('id')+"]")[l];
                  vm.onRemoveList(vm.idList,remove.id);//移除对应权限的所有id
                }
              }
            });

            //权限
            $(".myCheckPowerBox input").on('click',function(e){
              $(this).attr('checked',!$(this).attr('checked'));
              if($(this).is(':checked')){
                vm.idList.push($(this).attr('id'));
              }else{
                vm.onRemoveList(vm.idList,$(this).attr('id'));
              }
            });

            //全选
            $("#allCheck").on('click',function(e){
              vm.idList=[];
              if($(this).is(':checked')){
                $('.myCheckBox input').prop("checked",true);
                for(let i=0; i<$('.myCheckBox input').length; i++){
                  vm.$set(vm.checkBoxList, '' + $('.myCheckBox input')[i].id , false);
                  vm.idList.push($('.myCheckBox input')[i].id);
                  for(let l=0; l<$("[data-id="+$('.myCheckBox input')[i].id+"]").length; l++){
                    let add=$("[data-id="+$('.myCheckBox input')[i].id+"]")[l];
                    vm.idList.push(add.id);
                  }
                  $("[data-id="+$('.myCheckBox input')[i].id+"]").prop("checked",true);
                }
              }else{
                $('.myCheckBox input').prop("checked",false);

                for(let i=0; i<$('.myCheckBox input').length; i++){
                  vm.$set(vm.checkBoxList, '' + $('.myCheckBox input')[i].id , true);
                  vm.onRemoveList(vm.idList,$('.myCheckBox input')[i].id);//移除启用的id
                  for(let l=0; l<$("[data-id="+$('.myCheckBox input')[i].id+"]").length; l++){
                    let remove=$("[data-id="+$('.myCheckBox input')[i].id+"]")[l];
                    vm.onRemoveList(vm.idList,remove.id);//移除对应权限的所有id
                  }
                  $("[data-id="+$('.myCheckBox input')[i].id+"]").prop("checked",false);
                }
              }
            });

          },150)

          //给表格赋值
          vm.menudata=vm.newList;
        }).catch(error => {
        })
      },
      onRemoveList(list,val){//移除对应提交的权限id
        for (var i = 0; i < list.length; i++) {
          if (list[i] == val) {
            list.splice(i, 1);
          }
        }
      },
      onSeva(){//保存权限
        let vm=this;
        let params={
          rIds:vm.idList
        }
        updateMenuPower(vm.id,params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log(res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          console.log(error)
        })
        //console.log(this.idList)
      },
      onBack(){
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      }
    }
  }
</script>



